<template>
    <div class="qRCode">
        <div class="header">
            <img src="../../assets//img/qrcode.png" alt="" @click="gotoScan" />
            <div class="t">
                生成二维码时，选择的开始日期必须为某月的一号，否则无法上传！
            </div>
        </div>
        <div class="promot" v-show="code">数据已获取</div>
        <div class="item">
            <!-- <span>*</span> -->
            <div class="t2">工号：</div>
            <input
                v-model="employeeId"
                type="text"
                style="flex: 1; margin-right: 15px"
            />
        </div>
        <div class="item">
            <!-- <span>*</span> -->
            <div class="t1">验证码：</div>
            <input
                v-model="verificationCode"
                type="text"
                class="input"
                style="
                    margin-right: 10px;
                    flex: 1;
                    max-width: calc(100% - 210px);
                "
            />
            <div style="height: 40px">
                <canvas
                    width="100px"
                    height="40px"
                    id="captcha2"
                    style="margin-right: 15px"
                ></canvas>
            </div>
        </div>
        <div class="footer">
            <van-checkbox
                v-model="checked"
                checked-color="#ee0a24"
                shape="square"
                icon-size="30px"
            ></van-checkbox>
            <div class="t">
                我同意并承认，上述所有信息均已合法，并将提供给迈瑞！
            </div>
        </div>
        <van-button
            type="danger"
            :disabled="disabled"
            class="submit"
            @click="submit"
            :loading="loading"
            loading-text="提交中..."
            >提交</van-button
        >
    </div>
</template>

<script>
import Vue from "vue";
import { Checkbox, CheckboxGroup } from "vant";
import { Button } from "vant";
import CaptchaMini from "captcha-mini";
Vue.use(Button);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { Loading, Notify } from "vant";
import { Dialog } from "vant";
Vue.use(Loading);
Vue.use(Notify);
Vue.use(Dialog);
import { navigateTo, isInWechatMP } from "../../lib/util";
import { mapState } from "vuex";
import { submitQuantityScanCode } from "@/api/api";
export default {
    data() {
        return {
            employeeId: "", // 工号
            verificationCode: "", // 验证码
            checked: false,
            disabled: true,
            answer: "", // 验证码答案
            loading: false,
            openId: "",
            captcha2: null,
            code: null,
        };
    },
    computed: {
        ...mapState("user", ["id", "openid"]),
    },
    watch: {
        verificationCode(valNew) {
            console.log("verificationCode", valNew);
            if (valNew.toUpperCase() === this.answer.toUpperCase()) {
                this.disabled = false;
            } else {
                this.disabled = true;
            }
        },
    },
    mounted() {
        /*传值,参数配置值，选择性配置*/
        this.captcha2 = new CaptchaMini({
            lineWidth: 1, //线条宽度
            lineNum: 0, //线条数量
            dotR: 1, //点的半径
            dotNum: 15, //点的数量
            preGroundColor: [10, 80], //前景色区间
            backGroundColor: [150, 250], //背景色区间
            fontSize: 16, //字体大小
            fontFamily: ["Georgia", "微软雅黑", "Helvetica", "Arial"], //字体类型
            fontStyle: "stroke", //字体绘制方法，有fill和stroke
            content:
                "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", //验证码内容
            length: 4, //验证码长度
        }); // 传值
        this.captcha2.draw(document.querySelector("#captcha2"), (r) => {
            console.log(r, "验证码2");
            this.answer = r;
        });
        console.log("query", this.$route.query, this.openid);
        let code = this.$route.query.code;
        if (code) {
            // Notify({ type: "success", message: "二维码获取成功！" });
            Dialog.alert({
                title: "温馨提示",
                message: `二维码获取成功！${code}`,
            }).then(() => {
                // on close
            });
        }
        this.code = code;
    },
    methods: {
        gotoScan() {
            if (isInWechatMP()) {
                navigateTo("/pages/qrScanCode/index");
            } else {
                console.log("goto scan");
            }
        },
        onClick() {
            this.$emit("onClick");
        },
        submit() {
            console.log("query", this.$route.query, this.openid);
            // alert(JSON.stringify(this.$route.query));
            if (!this.checked) {
                Dialog.alert({
                    title: "温馨提示",
                    message:
                        "未勾选 我同意并承认，上述所有信息均已合法，并将提供给迈瑞！",
                }).then(() => {
                    // on close
                });
                return;
            }
            if (
                this.verificationCode.toUpperCase() !==
                this.answer.toUpperCase()
            ) {
                Notify({ type: "warning", message: "请输入正确的验证码！" });
                return;
            }
            if (!this.code) {
                Notify({ type: "warning", message: "请先扫码获取二维码！" });
                return;
            }
            let code = this.code;
            let qrCode = decodeURIComponent(code);
            console.log("qrCode", qrCode);

            this.loading = true;
            this.openId = this.openid || localStorage.getItem("openid"); // 页面刷新vuex值丢失
            // todo api接口调用！
            submitQuantityScanCode(this.openId, qrCode, this.employeeId)
                .then((s) => {
                    console.log("s", s);
                    const { code, message } = s.data;
                    if (code === "0000") {
                        Notify({ type: "success", message: "提交成功" });
                        this.code = "";
                        this.verificationCode = "";
                        this.captcha2.draw(
                            document.querySelector("#captcha2"),
                            (r) => {
                                console.log(r, "验证码2");
                                this.answer = r;
                            }
                        );
                        // if (isInWechatMP()) {
                        //     navigateTo("/pages/index/index");
                        // } else {
                        //     this.$router.push("/");
                        // }
                    } else if (code === "9001") {
                        Dialog.alert({
                            title: "温馨提示",
                            message: "同一个二维码扫码次数超过限制",
                        }).then(() => {
                            // on close
                        });
                    } else if (code === "9002") {
                        Dialog.alert({
                            title: "温馨提示",
                            message: "同一台手机一天内扫码次数超过限制",
                        }).then(() => {
                            // on close
                        });
                    } else if (code === "9003") {
                        Dialog.alert({
                            title: "温馨提示",
                            message: message,
                        }).then(() => {
                            // on close
                        });
                    } else {
                        Dialog.alert({
                            title: "温馨提示",
                            message: "提交失败！",
                        }).then(() => {
                            // on close
                        });
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    console.log("err", err);
                    const { code, message } = err.response?.data;
                    if (code === "9001") {
                        Dialog.alert({
                            title: "温馨提示",
                            message: "同一个二维码扫码次数超过限制",
                        }).then(() => {
                            // on close
                        });
                    } else if (code === "9002") {
                        Dialog.alert({
                            title: "温馨提示",
                            message: "同一台手机一天内扫码次数超过限制",
                        }).then(() => {
                            // on close
                        });
                    } else if (code === "9003") {
                        Dialog.alert({
                            title: "温馨提示",
                            message: message,
                        }).then(() => {
                            // on close
                        });
                    } else {
                        Dialog.alert({
                            title: "温馨提示",
                            message: "提交失败！",
                        }).then(() => {
                            // on close
                        });
                    }
                    this.loading = false;
                });
        },
    },
};
</script>

<style scoped lang="less">
.qRCode {
    border-top: 1px solid #ebedf0;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .header {
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        margin-left: 15px;
        margin-right: 15px;
        height: 40px;
        // width: calc(100% - 30px);
        img {
            width: 40px;
            height: 40px;
        }
        .t {
            font-size: 12px;
            color: rgba(242, 7, 16, 1);
            margin-left: 10px;
            text-align: left;
            height: 40px;
        }
    }
    .promot {
        color: green;
        margin-left: 15px;
        text-align: left;
        // width: 100%;
        font-size: 15px;
        margin-top: 20px;
        // font-weight: bold;
    }
    .item {
        display: flex;
        flex-direction: row;
        margin-top: 30px;
        width: 100%;
        height: 40px;
        .t2 {
            margin-left: 15px;
            height: 40px;
            line-height: 40px;
            font-size: 15px;
            min-width: 70px;
            font-weight: bold;
            color: #000000;
            text-align: left;
            // position: relative;
            // background: green;
        }
        .t1 {
            margin-left: 15px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            min-width: 70px;
            font-weight: bold;
            color: #000000;
            text-align: left;
            position: relative;
            // background: red;
        }
        .t1::after {
            content: "*";
            color: red;
            position: absolute;
            left: -0.5em; /* 调整这个值以使 * 更靠近文字 */
        }

        .t1::before {
            content: "";
            position: absolute;
            left: 0;
            width: 0.1em; /* 调整这个值以匹配 * 的宽度 */
            height: 1em; /* 覆盖第一个字符的高度 */
        }
    }
    .footer {
        margin-top: 30px;
        display: flex;
        flex-direction: row;
        margin-left: 15px;
        margin-right: 15px;
        height: 40px;
        align-items: center; /* 确保子元素垂直居中 */
        // justify-content: center; /* 确保子元素水平居中 */
        .t {
            font-size: 12px;
            color: rgba(242, 7, 16, 1);
            text-align: left;
            // line-height: normal;
            // height: 40px;
        }
        ::v-deep .van-checkbox__icon .van-icon {
            margin-right: 10px !important;
            border: 1px solid #c8c9cc !important;
        }
    }
    .submit {
        width: calc(100% - 30px);
        margin: 15px;
        margin-top: 30px;
        background-color: rgba(242, 7, 16, 1) !important;
    }
}
</style>
